<template>
  <div class="rankingList">
    <!-- 榜单 -->
    <!-- <div class="goBack" @click="goBack"></div> -->
    <div class="rankingList-box">
      <div class="ranking-from">
        <div class="ranking-from-title">云音乐特色榜</div>
        <div
          class="ranking-from-con"
          v-for="(item, index) in rankingListData"
          :key="index"
          @click="getMusicDetail(item.id)"
        >
          <div
            class="ranking-from-conImg"
            :style="{
              opacity: 0.6,
              backgroundColor: 'rgba(0,0,0,.5)',
              backgroundImage: `url(${item.coverImgUrl}) `,
              backgroundSize: 'cover',
            }"
          >
            <div class="ranking-from-playcount">
              <img src="../../assets/image/icon/shouting.png" />
              {{ item.playCount | changeScore }}
            </div>
            <div class="ranking-from-collection">
              <img src="../../assets/image/icon/shoucangliebiao.png" />{{
                item.subscribedCount | changeScore
              }}
            </div>
          </div>
          <div class="ranking-from-text">{{ item.name }}</div>
        </div>
      </div>
      <div class="globalList">
        <div class="globalList-title">云音乐全球榜</div>
        <div
          class="globalList-con"
          v-for="(item, index) in globalListData"
          :key="index"
          @click="getMusicDetail(item.id)"
        >
          <div
            class="globalList-conImg"
            :style="{
              opacity: 0.6,
              backgroundColor: 'rgba(0,0,0,.5)',
              backgroundImage: `url(${item.coverImgUrl}) `,
              backgroundSize: 'cover',
            }"
          >
            <div class="globalList-playcount">
              <img src="../../assets/image/icon/shouting.png" />
              {{ item.playCount | changeScore }}
            </div>
            <div class="globalList-collection">
              <img src="../../assets/image/icon/shoucangliebiao.png" />{{
                item.subscribedCount | changeScore
              }}
            </div>
          </div>
          <div class="globalList-text">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="ranking-con" id="ranking-con">
      <div class="con-null" v-if="rankTextData == 0">
        <div class="con-null-title">还没有数据噢~~~</div>
      </div>
      <div class="ranking-con-box" v-else>
        <div class="contain-top">
          <div class="contain-top-cn clearfix">
            <div class="contain-img fl">
              <img
                v-lazy="rankTextData.coverImgUrl"
                :key="rankTextData.coverImgUrl"
                class="auto-img"
              />
              <!-- :src="rankTextData.coverImgUrl" -->
            </div>
            <div class="contain-text fl">
              <div class="text-title">{{ rankTextData.name }}</div>
              <div class="text-name">By {{ rankTextData.nickname }}</div>
              <div class="text-tear">{{ rankTextData.description }}</div>
            </div>
          </div>
          <div class="contain-play">
            <div class="play-lis">
              <el-tooltip
                class="item"
                effect="dark"
                content="播放全部"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allplay.png"
                  class="auto-img"
                  @click.stop="allPlay"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="全部加入播放列表"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/allList.png"
                  class="auto-img"
                  @click.stop="JOinPlayList('all')"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="下载"
                placement="top"
              >
                <img
                  src="../../assets/image/icon/xiazai.png"
                  class="auto-img"
                  @click.stop="downloadMusic(item, id)"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="contain-list">
          <div
            class="contain-list-con"
            v-for="(item, index) in rankData"
            :key="index"
            @click="getURL(item.id)"
          >
            <div class="contain-list-nav clearfix">
              <div class="contain-index">
                <span>{{ index + 1 }}</span>
              </div>
              <div
                class="contain-list-con-left"
                :style="{ '--hoverTransform': setTransform(index + 1) }"
              >
                <img
                  v-lazy="rankData.length > 0 ? item.al.picUrl : ''"
                  :key="rankData.length > 0 ? item.al.picUrl : ''"
                  class="auto-img"
                />
              </div>
              <div class="contain-list-con-cent">
                <div class="cent-top-name">
                  {{ rankData.length > 0 ? item.name : "" }}
                </div>
                <div
                  class="cent-top-text"
                  :style="`transform: translateX(${
                    2.7946 -
                    (index + 1 >= 10 && index + 1 < 100
                      ? 0.68716
                      : index + 1 >= 100 && index + 1 < 1000
                      ? 2 * 0.68716
                      : index + 1 >= 1000 && index + 1 < 10000
                      ? 3 * 0.68716
                      : 0)
                  }rem);`"
                >
                  {{ rankData.length > 0 ? item.ar[0].name : "" }}
                </div>
              </div>
              <div class="contain-list-con-trackCount">
                <div class="con-list-item item0">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入喜欢列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/shoucang_1.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div class="con-list-item item1">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入歌单"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/jiahao.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item2"
                  @click.stop="JOinPlayList(item.id)"
                >
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="加入播放列表"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/liebiao.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
                <div
                  class="con-list-item item3"
                  @click.stop="downloadMusic(item.id, item.name)"
                >
                  <DownLoad ref="mychild" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="下载"
                    placement="top"
                  >
                    <img
                      class="auto-img"
                      :src="require('../../assets/image/icon/xiazai.png')"
                      alt=""
                    />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRankingListInfo,
  getMusicPlaylistInfo,
  getURLInfo,
  getMusicDetailInfo,
} from "@/Api/seachApi";
import DownLoad from "@/components/publicCompontents/DownLoad";
export default {
  name: "RankingList",
  components: { DownLoad },
  data() {
    return {
      //   网易云特色榜背景图
      //   特色榜单数据
      rankingListData: [],
      //   全球榜
      globalListData: [],
      // 榜单信息
      rankTextData: [],
      // 榜单歌曲展示列表
      rankData: [],
      // 歌单歌曲Id
      rankTrackIds: [],
      // 播放全部歌曲
      allplay: [],
      // 设置hover图片动态移动
      hoverTransform: "-0.78716rem",
    };
  },
  computed: {
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
  },
  created() {
    this.getRankingList();
  },
  methods: {
    // // 返回
    // goBack() {
    //   const loading = this.$loading({
    //     background: "rgba(0,0,0,0.6)",
    //     text: "正在加载中...",
    //     spinner: "el-icon-loading",
    //   });
    //   setTimeout(() => {
    //     loading.close();
    //     this.$store.commit("musicState/isRankingList", false);
    //   }, 500);
    // },

    //设置hover图片动态移动
    setTransform(index) {
      if (index < 10) {
        return "-0.78716rem";
      }
      let hoverTransform =
        index >= 10 && index < 100
          ? -0.72716 * 2
          : index >= 100 && index < 1000
          ? -0.72716 * 3
          : index >= 1000 && index < 10000
          ? -0.71716 * 4
          : 0;
      return `${hoverTransform}rem`;
    },
    // 榜单列表
    getRankingList() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
      });
      getRankingListInfo()
        .then((res) => {
          // console.log(res);
          setTimeout(() => {
            loading.close();
            let data = res.list.slice(0, 4);
            let global = res.list.slice(4);
            this.rankingListData = data;
            this.globalListData = global;
          }, 300);
        })
        .catch((err) => {
          loading.close();
          // console.log(err);
        });
    },
    // 获取歌单详情
    getMusicDetail(id) {
      // console.log(id);

      this.rankTrackIds = [];
      const loading = this.$loading({
        background: "rgba(0,0,0,0.6)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#ranking-con", //局部加載效果
      });

      getMusicPlaylistInfo({ id: id })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            loading.close();
            this.rankTextData = res.playlist;
            res.playlist.trackIds.map((v) => {
              this.rankTrackIds.push(v.id);
            });

            setTimeout(() => {
              this.getMusic();
            }, 300);
          }
        })
        .catch((err) => {
          loading.close();
          // console.log(err);
        });
    },
    // 获取歌曲详情列表信息
    getMusic() {
      getMusicDetailInfo(this.rankTrackIds)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.rankData = res.songs;
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 播放全部
    allPlay() {
      this.axios({
        method: "GET",
        url: "http://musicapi.leanapp.cn/song/detail?ids=" + this.rankTrackIds,
      })
        .then((res) => {
          // console.log(res);

          if (res.data.code == 200) {
            res.data.privileges.map((v) => {
              this.allplay.push(v.id);
            });
            // console.log(this.allplay)
          }
          this.$store.commit("musicState/musicPlayList", this.allplay);
          this.getURL(res.data.songs[0].id);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 点击播放
    getURL(id) {
      if (this.musicID === id) {
        return;
      }
      // console.log(id);
      this.$store.commit("musicState/isClickPlay", false);
      // this.axios({
      //   method: "GET",
      //   url: " https://autumnfish.cn/song/url?id=" + id,
      // })
      getURLInfo({ id: id })
        .then((res) => {
          // console.log(res);
          // console.log(1)
          if (res.code == 200) {
            // this.$store.commit("musicState/audioSrc", res.data[0].url);
            this.$store.commit("musicState/SetMusicID", id);
            // setTimeout(() => {
            //   this.$store.commit("musicState/isClickPlay", true);
            //   this.getAudioElement.play();
            // }, 800);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 加入播放列表
    JOinPlayList(uid) {
      // 加入播放列表
      // console.log(this.rankTrackIds)
      if (uid == "all") {
        this.$store.commit(
          "musicState/SetMusicPlayListData",
          this.rankTrackIds
        );
      } else {
        this.$store.commit("musicState/SetMusicPlayListData", uid);
      }
      // console.log(this.$store.state.musicPlayList)
    },
    // 下载音乐
    downloadMusic(uid, MusicName) {
      this.$nextTick(() => {
        // console.log("列表", this.$refs.mychild[0]);
        // debugger
        this.$refs.mychild[0].downLoad(uid, MusicName);
      });
    },
  },
  // 局部过滤器
  filters: {
    changeScore(n) {
      return parseInt(n / 100000) + "W";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";

.rankingList {
  width: 100%;

  height: 100%;
  // margin-left: calc(50% - 950px);
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;

  .goBack {
    width: 40px;
    height: 40px;
    background-image: url("../../assets/image/icon/fanhui.png");
    background-size: 100%;
    position: absolute;
    top: 5px;
    left: 0px;
    cursor: pointer;
    &:hover {
      background-image: url("../../assets/image/icon/fanhui1.png");
      background-size: 100%;
    }
  }

  .rankingList-box {
    flex: 8;
    height: 100%;
    width: 1000px;
    min-width: 920px;
    padding: 30px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
  }
  .ranking-from {
    width: 100%;
    height: 420px;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    display: flex;
    .ranking-from-title {
      font-size: 60px;
      color: rgba(242, 60, 60, 0.7);
      font-weight: 900;
      text-shadow: 10px 10px 5px #333;

      position: absolute;
      top: 0;
      //   z-index: -1;
    }
    .ranking-from-con {
      flex: 1;
      width: 260px;
      height: 300px;
      overflow: hidden;
      margin: 26px;
      margin-top: 90px;
      box-sizing: border-box;

      &:hover {
        .ranking-from-conImg {
          transform: scale(1.2);
          .ranking-from-playcount,
          .ranking-from-collection {
            transform: scale(0);
          }
        }
      }
    }
    .ranking-from-conImg {
      width: 240px;
      height: 240px;
      background-color: pink;
      position: relative;
      margin: auto;

      .ranking-from-playcount,
      .ranking-from-collection {
        width: 100%;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        position: absolute;
        right: 0;
        vertical-align: middle;
        color: #fff;
        img {
          margin-right: 10px;
          width: 26px;
          height: 26px;
          vertical-align: bottom;
          display: inline-block;
        }
      }
      .ranking-from-playcount {
        height: 40px;
        bottom: 16px;
      }
      .ranking-from-collection {
        bottom: 0;
      }
    }
    .ranking-from-text {
      font-size: 26px;
      font-weight: bold;
      color: #fff;
      vertical-align: middle;
    }
  }

  .globalList {
    width: 100%;
    height: 400px;
    // background-color: #fff;
    background-color: rgba(0, 0, 0, 0);
    // padding-top: 90px;
    padding: 90px 70px 0 70px;
    text-align: center;
    position: relative;
    display: flex;
    // flex-direction: column;
    flex-flow: row wrap;
    box-sizing: border-box;

    .globalList-title {
      font-size: 60px;
      color: rgba(214, 61, 61, 0.7);
      font-weight: 900;
      text-shadow: 10px 10px 5px #333;
      position: absolute;
      top: 0;
      left: 0;      
    }
    .globalList-con {
      // float: left;
      width: 200px;
      height: 260px;
      overflow: hidden;
      margin: 0 30px;

      box-sizing: border-box;

      &:hover {
        .globalList-conImg {
          transform: scale(1.2);
          .globalList-playcount,
          .globalList-collection {
            transform: scale(0);
          }
        }
      }
    }
    .globalList-conImg {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: relative;

      .globalList-playcount,
      .globalList-collection {
        // width: 100px;
        width: 100%;
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        right: 0;
        vertical-align: middle;
        color: #fff;
        img {
          margin-right: 10px;
          width: 26px;
          height: 26px;
          vertical-align: bottom;
          display: inline-block;
        }
      }
      .globalList-playcount {
        height: 40px;
        bottom: 18px;
      }
      .globalList-collection {
        bottom: 0;
      }
    }
    .globalList-text {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      text-align: left;
      vertical-align: middle;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
  }

  .ranking-con {
    flex: 4;
    width: 100%;
    min-width: 660px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 10px 10px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .con-null {
      width: 100%;
      height: 90px;
      line-height: 110px;
      box-sizing: border-box;
      text-align: left;
      font-size: 28px;
      padding: 0 20px;
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(0, 0, 0, 0.6);
    }
    .ranking-con-box {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .contain-top {
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.1);

    .contain-top-cn {
      width: 100%;
      padding-left: 10px;
      box-sizing: border-box;

      .contain-img {
        width: 120px;
        height: 120px;
        margin-top: 5px;
        overflow: hidden;
        border-radius: 10px;
      }
      .contain-text {
        margin-left: 10px;
        text-align: left;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.7);

        .text-title {
          font-weight: bold;
          font-size: 24px;
        }
        .text-name {
          font-size: 16px;
          font-weight: bold;
        }
        .text-tear {
          margin-top: 12px;
          height: 50px;
          width: 380px;
          font-size: 18px;
          // background-color: red;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

          &:hover {
            height: 76px;
            overflow: visible;
            white-space: inherit;
          }
        }
      }
    }
    .contain-play {
      width: 100%;
      margin-top: 10px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.2);

      .play-lis {
        width: 120px;
        height: 100%;
        float: right;

        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
          margin-top: 12px;
          display: inline-block;
          vertical-align: bottom;
        }
      }
    }
  }

  .contain-list {
    width: 100%;
    // height: 680px;
    height: calc(100% - 180px);
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }

    .contain-list-con {
      width: 100%;
      height: 130px;
      padding: 20px;
      box-sizing: border-box;

      background-color: rgba(255, 255, 255, 0.1);

      .contain-list-nav {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-bottom: 1px solid #fff;
        position: relative;
        display: flex;
      }

      &:hover {
        .contain-list-nav {
          border: none;
          background-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.6);
        }
        .contain-index {
          color: rgba(255, 255, 255, 0);
        }
        .contain-list-con-left {
          transition: all 0.3s;
          // transform: translateX(-70px);
          transform: translateX(var(--hoverTransform));
        }

        .cent-top-name {
          transition: all 0.3s;
          transform: translateX(-80px);
        }
        .cent-top-text {
          transform: translateX(-80px) !important;
        }
        .item0 {
          transition: all 0.4s;
          transform: translateY(0px);
        }
        .item1 {
          transition: all 0.5s;
          transform: translateY(0px);
        }
        .item2 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
        .item3 {
          transition: all 0.6s;
          transform: translateY(0px);
        }
      }
    }
    .contain-index {
      height: 100%;
      font-size: 80px;
      font-weight: 900;
      margin-right: 10px;
      color: rgba(255, 255, 255, 0.6);
      // background-color: rgba(0, 0, 0, 0.1);

      span {
        // position: absolute;
        // bottom: -26px;
        // left: calc(50% - 26px);
      }
    }
    .contain-list-con-left {
      width: 90px;
      min-width: 90px;
      height: 90px;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s;
      transform: translateX(0px);
      background-color: rgba(0, 0, 0, 0.3);
    }
    .contain-list-con-cent {
      margin-left: 26px;
      display: flex;
      flex-flow: column;
      text-align: left;
      width: 100%;

      .cent-top-name {
        width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s;
        transform: translateX(0px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .cent-top-text {
        width: 100px;
        max-width: 200px;
        min-width: 200px;
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
        transition: all 0.3s;
        // transform: translateX(218px);
        text-align: right;
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .contain-list-con-trackCount {
      height: 100%;
      line-height: 130px;
      // float: right;
      margin-right: 10px;

      .con-list-item {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
        transition: all 0.3s;
        transform: translateY(50px);
        cursor: pointer;
        z-index: 100;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .globalList{
    padding: 90px 80px 0 80px !important;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1520px) {
  .globalList{
    padding: 90px 0px 0 0px !important;
  }
}
@media screen and (min-width: 1521px) {
  .globalList{
    padding: 90px 30px 0 30px !important;
  }
}
</style>
